<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="220" width="340" style="text-align: center">












<defs>  
     
<path id="loop-normalb" d="M240.967 22.482c11.487.563 35.673-.18 58.191.26 1.556.03 9.449 3.572 9.86 10.608.927 15.917.41 45.355.718 61.9.344 18.403 10.733 12.85 15.225 12.944 11.929.25 28.043-2.882 28.12 5.693.324 35.68-.766 28.634.121 58.867-20.749-3.615-70.147 11.67-83.959-20.493-6.62-15.417-4.685-43.588-5.126-65.681-.235-11.771-.524-22.283-2.071-33.459-1.942-14.03-21.88 4.091-21.079-30.639 z"/>
    
    
    
<!-- radial gradient has same color at constnnt distance from center,
         regardless of direction-->
	  <radialGradient id="fadeb" cx="0" cy="0" fx="0" fy="0" r="20" gradientUnits="userSpaceOnUse">
	    <stop stop-color="#3d85c6" stop-opacity="1" offset="0" />

	  </radialGradient> 
      

  </defs>
  


   

    <use style="fill:none;stroke:#ccc;stroke-width:0;"
       xlink:href="#loop-normalb" />

  <!-- outer group makes sure mask is applied after animateMotion -->
  <g style="mask:url(#tail)">
    <!-- circle with gradient radius -->
    
    
    
    


       <circle style="fill:url(#fadeb);" fill="#3d85c6" stroke="white" stroke-width="2" stroke-miterlimit="1"  cx="0" cy="0" r="7.5">
   

    
    
      <animateMotion style="text-align: center" calcMode="linear" dur="700s" repeatCount="indefinite" keyTimes="0;0.1;1" keyPoints="0;0.0;1">
                     
	      <mpath xlink:href="#loop-normalb"/>
      </animateMotion>
    </circle>

    
                <circle cx="0" cy="0" fill="none" r="10" stroke="#3d85c6" stroke-width="3">
  
    <animate attributeName="r" from="7" to="-3" dur="1.3s" begin="0s" repeatCount="indefinite"/>
    <animate attributeName="opacity" from="7" to="3" dur="2s" begin="0s" repeatCount="indefinite"/>
    
    
        <animateMotion 
        
        
        calcMode="linear" dur="700s" repeatCount="indefinite" keyTimes="0;0.1;1" keyPoints="0;0.0;1"
        
      path="M240.967 22.482c11.487.563 35.673-.18 58.191.26 1.556.03 9.449 3.572 9.86 10.608.927 15.917.41 45.355.718 61.9.344 18.403 10.733 12.85 15.225 12.944 11.929.25 28.043-2.882 28.12 5.693.324 35.68-.766 28.634.121 58.867-20.749-3.615-70.147 11.67-83.959-20.493-6.62-15.417-4.685-43.588-5.126-65.681-.235-11.771-.524-22.283-2.071-33.459-1.942-14.03-21.88 4.091-21.079-30.639 z" />
  
  </circle>
 
  </g>

























<defs>  
     
<path id="loop-normalc" d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z"/>
    
    
    
<!-- radial gradient has same color at constnnt distance from center,
         regardless of direction-->
	  <radialGradient id="fadec" cx="0" cy="0" fx="0" fy="0" r="20" gradientUnits="userSpaceOnUse">
	    <stop stop-color="#3d85c6" stop-opacity="1" offset="0" />

	  </radialGradient> 
      

  </defs>
  


   
  <use style="fill:none;stroke:#ccc;stroke-width:0;"
       xlink:href="#loop-normalc" />

  <!-- outer group makes sure mask is applied after animateMotion -->
  <g style="mask:url(#tail)">
    <!-- circle with gradient radius -->
    
    
    
    


       <circle style="fill:url(#fadec);" fill="#383838" stroke="white" stroke-width="2" stroke-miterlimit="1"  cx="0" cy="0" r="7.5">
   

    

      
      <animateMotion style="text-align: center"  dur="510s" repeatCount="indefinite" >
      
 
                     
	      <mpath xlink:href="#loop-normalc"/>
      </animateMotion>
    </circle>

    <circle cx="0" cy="0" fill="none" r="10" stroke="#3d85c6" stroke-width="3">
  
    <animate attributeName="r" from="7" to="-3" dur="1.5s" begin="0s" repeatCount="indefinite"/>
    <animate attributeName="opacity" from="7" to="3" dur="2s" begin="0s" repeatCount="indefinite"/>
    
    
        <animateMotion calcMode="linear"  dur="510s"   repeatCount="indefinite"   
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  
  
  </circle>

 
  </g>











  
</svg>
